<!--    完成了评论功能 -->
<template>
    <div class="container">

      <!--  警告提示框  -->
<!--      <div class="my-tip alert alert-success position-fixed" role="alert">-->
<!--        A simple success alert—check it out!-->
<!--      </div>-->

      <!--  面包屑导航 -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
          <li class="breadcrumb-item active" aria-current="page">评论</li>
        </ol>
      </nav>

      <!--  头部卡片  -->
      <div class="card border-primary">
        <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
        <div class="card-header text-primary">快来谈一谈你对这个网站的看法吧，或者在使用过程中遇到的问题也可以提出来呦~</div>
      </div>


      <!--  头部卡片  -->
      <div class="card border-primary mt-3">
        <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
        <div class="card-header">{{ comments.length }} 条回应</div>
        <div class="card-body ">

          <!--  评论内容表单  -->
          <form>
            <div class="form-group">
              <label class="card-title text-primary" for="exampleFormControlTextarea1">随便写点什么吧</label>
              <textarea v-model="commentObj.commentText" class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="留下点足迹..."></textarea>
            </div>
          </form>


          <div class="card-text">
            <button class="btn btn-outline-success" data-toggle="modal"
                    data-target="#exampleModal" data-whatever="@getbootstrap">发表评论</button>
          </div>

          <!--  评论展示区域  -->

          <!--  一级评论  -->
          <!--  v-show == 0 时，才显示，即只显示一级评论  -->
          <div class="media mt-4 border-top pt-1" v-for="item in comments" :key="item.id" >
            <img v-if="item.fId == 0" class="mr-3 my-image2" src="../../public/image/image_comment.png" alt="Generic placeholder image">
            <div v-if="item.fId == 0" class="media-body">
              <p class="mt-0 text-primary font-weight-bold">
                {{ item.cNickname }}
                <!--  点击回复的同时，先将 id 保存起来，正式提交的时候回用到 -->
                <button @click="changeItemId(item.id)" class="btn float-right" title="回复" data-toggle="modal"
                        data-target="#replyModal" data-whatever="@getbootstrap">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-huifu"></use>
                  </svg>
                </button>

                <!--  利用日期过滤器将日期格式化 -->
                <span class="float-right pr2">{{ item.gmtCreate | format('yyyy-MM-dd hh:mm:ss')}}</span>

<!--                &lt;!&ndash;  存放一个隐藏的 sapn 标签，用来保存该条评论的 id &ndash;&gt;-->
<!--                <span style="display: none">{{ item.id }}</span>-->
<!--                <input type="text" style="display: none" v-model="fatherId" v-text="item.id">-->

              </p>
              {{ item.cContent }}

              <!--  二级评论  -->
              <!--  item.fid != 0 说明是二级评论，显示出来  -->
<!--              <div class="media mt-3" v-for="item2 in comments2" :key="item2.id" v-if="item2.fId == item.id">-->
              <div class="media mt-3 pl-1 my-comment-2" v-for="item2 in comments2" :key="item2.id" v-show="item2.fId == item.id">
                <a v-if="item2.fId == item.id" class="pr-3" href="#">
                  <img class="my-image2" src="../../public/image/image_comment.png" alt="Generic placeholder image">
                </a>
                <div v-if="item2.fId == item.id" class="media-body">
                  <p class="mt-0 text-info font-weight-bold">
                    {{ item2.cNickname }}
                    <!--  点击发送回复，同时将需要回复的评论的 id 传入-->
                    <!--  目前只支持2级评论-->
<!--                    <button @click="sendReply(item2.id)" class="btn float-right" title="回复" data-toggle="modal"-->
<!--                            data-target="#replyModal" data-whatever="@getbootstrap">-->
<!--                      <svg class="icon" aria-hidden="true">-->
<!--                        <use xlink:href="#icon-huifu"></use>-->
<!--                      </svg>-->
<!--                    </button>-->

                    <span class="float-right pr2">{{ item2.gmtCreate | format('yyyy-MM-dd hh:mm:ss') }}</span>


                  </p>
                  <span class="my-comment-at">{{ "@" + item.cNickname}}</span>
                  <p>{{ item2.cContent }}</p>
                </div>
              </div>
            </div>
          </div>

          <!--  发表评论：弹出的模态对话框  -->
          <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">发表评论之前输入一下昵称吧</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form>
                    <div class="form-group">
                      <label for="recipient-name" class="col-form-label">昵称:</label>
                      <input v-model="commentObj.nickName" type="text" class="form-control" id="recipient-name">
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" @click="sendComment">确定发表</button>
                </div>
              </div>
            </div>
          </div>

          <!--  回复评论：弹出的模态对话框  -->
          <div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="replyModalLabel">请输入要回复的内容</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <form>
                    <div class="form-group">
                      <label for="recipient-name" class="col-form-label">昵称:</label>
                      <input v-model="replyObj.replyNickName" type="text" class="form-control" id="replyName">
                    </div>
                    <div class="form-group">
                      <label for="recipient-name" class="col-form-label">回复的内容:</label>
                      <textarea v-model="replyObj.replyCommentText" class="form-control" id="replyText" rows="3" placeholder="回复点什么吧..."></textarea>

<!--                      <input v-model="replyCommentText" type="text" class="form-control" id="replyText">-->
                    </div>
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" @click="sendReply">发表回复</button>
                </div>
              </div>
            </div>
          </div>


        </div>

      </div>



    </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        /*  从数据库中获取的所有评论*/
        comments: [],
        comments2: [],
        /*  评论对象  */
        commentObj: {
          /*  评论内容  */
          commentText: "",
          /*  评论昵称    */
          nickName: "",
        },
        /*  回复对象  */
        replyObj: {
          /*  回复的时候，评论内容和评论昵称*/
          replyCommentText: "",
          replyNickName: "",
          /*  父评论id */
          fId: ""
        }
      }
    },
    mounted () {
      // 页面刚加载出来的时候，从数据库获取数据
      this.getAllData();
    },
    methods: {
      /*  发表评论  */
      async sendComment() {
        const result = await this.$http.post("http://116.62.157.224:8081/comment", this.commentObj);
        console.log(result);
        console.log(result.data);

        if (result.data === 200) {
          alert("发布评论成功");
          /*  关闭模态框 */
          this.$('#exampleModal').modal('hide');
          /*  将输入框的值清空  */
          this.commentObj.commentText = "";
          this.commentObj.nickName = "";
          /*  同时刷新一下数据  */
          // getAllData();
          // 直接采用最原始的方法刷新页面，因为是全局刷新，所以可以使用这个方法
          window.location.reload();
        } else {
          alert("发布评论失败");
          this.commentObj.commentText = "";
          this.commentObj.nickName = "";
          window.location.reload();

        }
      },
      /*  发表回复  */
      async sendReply() {
        const result = await this.$http.post("http://116.62.157.224:8081/comment/reply", this.replyObj);
        console.log(result);

        if (result.data === 200) {
          alert("发布评论成功");
          /*  关闭模态框 */
          this.$('#replyModal').modal('hide');
          /*  将输入框的值清空  */
          this.replyObj.replyCommentText = "";
          this.replyObj.replyNickName = "";
          window.location.reload();
        } else {
          alert("发布评论失败");
          this.replyObj.replyCommentText = "";
          this.replyObj.replyNickName = "";
          window.location.reload();
        }

      },
      async getAllData() {
        const result = await this.$http.get("http://116.62.157.224:8081/comment/getAllData");
        console.log(result);
        this.comments = result.data;
        this.comments2 = result.data;
      },
      changeItemId(id) {
        this.replyObj.fId = id;
      }

    }
  }
</script>

<style scoped>

  /*  图标  */
  .icon {
    width: 1.5em; height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }


  /*  二级评论  */
  .my-comment-2 {
    border-color: #f85f06d1 !important;
    border-left: 2px solid;
  }

  /*  图片大小调整  */
  .my-image2 {
    width: 40px;
    height: 40px;
  }

  img {
    max-width: none;
  }

  li img {
    width: 40px;
    height: 40px;
  }

  /*  @父评论的那个 span 标签*/
  .my-comment-at {
    color: #f97c33;
  }

  li button:hover .icon {
    width: 2em;
    height: 2em;
    animation:changeSize 1s;
  }

  @keyframes changeSize
  {
    from { width: 1.5em; height: 1.5em;}
    to { width: 2em; height: 2em;}
  }

  /*   评论内容的那个框 */
  .media-body {
    color: #657487;
  }

  .media-body p {
    color: #657487;;
  }

  /*  回复某人的评论，左移25px*/
  .reply-comment {
    margin-left: 25px;
  }



</style>
